<template>
    <div ref="menuMain" class="menu-main">
        <adminCard>
            <template v-slot:cardTitle>菜單欄設置</template>
            <template v-slot:cardContent>
                <div class="top-action">
                    <el-input class="search-input" v-model="searchContent" placeholder="請輸入內容"></el-input>
                    <el-button type="primary" @click="getData">搜索</el-button>
                    <el-button type="primary" @click="addData">添加</el-button>
                </div>
                <div class="table-main">
                    <el-table v-loading="tableLoading" :data="tableData">
                        <el-table-column align="center" prop="id" label="序號" width="80"></el-table-column>
                        <el-table-column align="center" prop="name" label="菜單名稱"></el-table-column>
                        <el-table-column align="center" prop="type" label="類型"></el-table-column>
                        <el-table-column align="center" prop="is_disable" label="是否顯示"></el-table-column>
                        <el-table-column align="center" prop="path" label="菜單路徑"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" type="primary"><i class="el-icon-edit"></i></el-button>
                                <el-button size="small" type="danger"><i class="el-icon-delete"></i></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page-main">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[20, 50, 100, 200]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </template>
        </adminCard>
        <el-dialog title="操作" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="addForm">
                <el-form-item label="名稱">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="菜單路徑">
                    <el-input v-model="addForm.path"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="addForm.sort"></el-input>
                </el-form-item>
                <el-form-item label="是否顯示">
                    <el-radio-group v-model="addForm.is_disable">
                        <el-radio :label="0">是</el-radio>
                        <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="formSubmit()" :loading="dialogLoading">確定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import adminCard from "@/components/admin-card.vue";
import { Message } from 'element-ui';
import axios from "~/plugins/axios.js";

export default {
    name: 'adminMenuPage',
    layout: 'admin',
    ssr: false,
    pageTitle: '系統設置 / 菜單欄設置',
    components: {
        adminCard
    },
    data() {
        return {
            searchContent: '',
            tableData: [],
            tableLoading: false,
            currentPage: 1,
            pageSize: 20,
            total: 0,
            dialogVisible: false,
            addForm: {
                is_disable: 0,
                sort: 0,
                path: '',
                name: '',
                pid: 0
            },
            dialogActionType: '',
            dialogLoading: false
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            this.tableLoading = true;
            let url = '/admin/system.Nav/list';
            if (this.searchContent) {
                url = `/admin/system.Nav/list?search_field=name&search_exp=like&search_value=${this.searchContent}`;
            }
            const res = await axios.get(url).finally(() => {
                this.tableLoading = false;
            });
            if (res.code == 200) {
                this.tableData = res.data.list;
                this.total = res.data.count;
            } else {
                Message.error('数据获取失败');
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getData();
        },
        addData() {
            this.dialogVisible = true;
            this.dialogActionType = 'add';
        },
        async formSubmit() {
            this.dialogLoading = true;
            const res = await axios.post('/admin/system.Nav/add', this.addForm).finally(() => {
                this.dialogLoading = false;
            });
            if (res.code == 200) {
                this.dialogVisible = false;
                this.getData();
            } else {
                Message.error('数据添加失败');
            }
        }
    }
}
</script>

<style scoped lang="less">
.menu-main {
    .top-action {
        display: flex;

        .search-input {
            width: 200px;
            margin-right: 10px;
        }
    }

    .table-main {
        margin-top: 40px;
    }

    .page-main {
        margin-top: 40px;
        text-align: right;
    }
}
</style>